<template>
  <div class="main average-wrapper">
    <div class="main-hd">
      <h2>{{ $t('m.pingzhangManage') }}</h2>
    </div>
    <div class="main-hd"></div>
    <div class="content-wrap">
      <div class="form-inline" style="margin-bottom: 30px;">
          <div class="items">
            <div class="label">
              {{$t('m.orderGid')}}
            </div>
            <!-- 订单编号 -->
            <Input
              type="text"
              class="ivu-input-w200"
              v-model="search.orderGid"
              @on-enter="getFlatAccountManageList"
              :placeholder="$t('m.orderGid')"
            />
          </div>
          <div class="items">
            <div class="label">
              {{$t('m.cName')}}
            </div>
            <!-- 用户姓名 -->
            <Input
              type="text"
              class="ivu-input-w200"
              v-model="search.fullName"
              @on-enter="getFlatAccountManageList"
              :placeholder="$t('m.cName')"
            />
          </div>
          <div class="items">
            <div class="label">
              {{$t('m.Account')}}
            </div>
            <!-- 账号 -->
            <Input
              type="text"
              class="ivu-input-w200"
              v-model="search.phone"
              @on-enter="getFlatAccountManageList"
              :placeholder="$t('m.Account')"
            />
          </div>
          <div class="items">
            <div class="label">
              {{$t('m.repayCreat')}}
            </div>
            <!-- 还款状态 -->
            <Select
              class="ivu-input-w200"
              :placeholder="$t('m.repayCreat')"
              v-model="search.orderRepaymentStatus"
            >
              <Option :value="''">{{this.$t('m.entire')}}</Option>
              <Option :value="'repayNo'">{{this.$t('m.wèihuánkuǎn')}}</Option>
              <Option :value="'preRepaid'">{{this.$t('m.pre_repaid')}}</Option>
              <Option :value="'repaid'">{{this.$t('m.yǐjiéqīng')}}</Option>
            </Select>
          </div>
          <div class="items">
            <div class="label">
              {{$t('m.ynOverdue')}}
            </div>
            <!-- 是否逾期 -->
            <Select
              class="ivu-input-w200"
              :placeholder="$t('m.ynOverdue')"
              v-model="search.overdueStatus"
            >
              <Option :value="''">{{this.$t('m.entire')}}</Option>
              <Option :value="'1'">{{this.$t('m.yes')}}</Option>
              <Option :value="'0'">{{this.$t('m.no')}}</Option>
            </Select>
          </div>
          <div class="items">
            <div class="label">
              {{$t('m.applyTime')}}
            </div>
            <!-- 申请时间 -->
            <DatePicker
              v-model="time1"
              type="daterange"
              format="yyyy-MM-dd"
              :options="disDate"
              @on-change="e => timeChange(e, 'order')"
              :placeholder="$t('m.applyTime')"
              class="ivu-input-w200"
            ></DatePicker>
          </div>
          <div class="items">
            <div class="label">
              {{$t('m.rLt')}}
            </div>
            <!-- 打款时间 -->
            <DatePicker
              v-model="time2"
              type="daterange"
              format="yyyy-MM-dd"
              :options="disDate"
              @on-change="e => timeChange(e, 'pay')"
              :placeholder="$t('m.rLt')"
              class="ivu-input-w200"
            ></DatePicker>
          </div>
          <div class="items">
            <div class="label">
              {{$t('m.sptime')}}
            </div>
            <!-- 应还时间 -->
            <DatePicker
              v-model="time3"
              type="daterange"
              format="yyyy-MM-dd"
              @on-change="e => timeChange(e, 'bue')"
              :placeholder="$t('m.sptime')"
              class="ivu-input-w200"
            ></DatePicker>
          </div>
          <br>
        <div style="margin-top:15px;" >
          <Button class="search_btn" @click="handleReset">{{$t('m.recycle')}}</Button>
          <Button
            class="search_btn"
            type="primary"
            @click="getFlatAccountManageList"
          >{{$t('m.cháxún')}}</Button>
        </div>
      </div>

      <Table ref="orderTable" border :columns="columns" :data="dataSource" :loading="loading"></Table>

      <div style="margin-top: 5px;text-align: right;">
        <Page
          :total="total"
          :current.sync="search.page"
          :page-size-opts="[10, 20, 40, 80, 100, 200, 400, 600, 800, 1000]"
          show-total
          show-elevator
          show-sizer
          @on-change="pageChange"
          @on-page-size-change="handleSizeChange"
          style="margin: 15px 0;"
        ></Page>
      </div>
      <!-- 订单列表 end -->
    </div>
    <Modal v-model="baseInfoBox" class="baseInfo_box_title" :title="$t('m.sUI')" width="70%">
      <base-info
        :userId="baseInfoUserId"
        :orderGid="baseInfoOrderGid"
        :baseType="baseInfoType"
        v-if="baseInfoBox"
      ></base-info>
      <div slot="footer"></div>
    </Modal>
    <!-- 线下还款 begin-->
    <Modal
      v-model="repayModal"
      :title="$t('m.huánkuǎnjípíngzhàng')"
      :styles="{ top: '20px' }"
      :footer-hide="true"
      width="800"
      :mask-closable="false"
    >
      <Tabs v-model="repayTab">
        <TabPane :label="$t('m.setting')" name="repay">
          <Form
            ref="repayForm"
            :model="repayForm"
            :rules="repayRules"
            :label-width="150"
            class="base-form"
          >
            <FormItem :label="$t('m.dìngdānbiānhào')">
              <span>{{orderGidSet}}</span>
            </FormItem>
            <FormItem :label="$t('m.shèngyúhuánkuǎnjīné')">
              <span>{{formatRemainingRepaidAmountSet}}</span>
            </FormItem>
            <FormItem :label="$t('m.shíjìhuánkuǎnjīné')" prop="repayAmount">
              <InputNumber
                style="width: 100%"
                :placeholder="$t('m.repayMuch')"
                :min="0"
                :max="remainingRepaidAmountSet"
                v-model="repayForm.repayAmount"
              ></InputNumber>
            </FormItem>
            <FormItem :label="$t('m.jiǎnmiǎnjīné')" prop="reductionAmount">
              <Input
                type="text"
                :placeholder="$t('m.repayMuch')"
                v-model.trim="repayForm.reductionAmount"
                number
              ></Input>
            </FormItem>
            <FormItem :label="$t('m.repayTime')" prop="repayDate">
              <DatePicker
                v-model="hksjsaleDate"
                :options="repayFormOptions"
                style="width:100%"
                type="date"
                :value="repayForm.repayDate"
                :placeholder="$t('m.repayTime')"
                format="yyyy-MM-dd HH:mm:ss"
                @on-change="handleRepayDate"
              ></DatePicker>
            </FormItem>
            <FormItem :label="$t('m.repayClu')" prop="repayChannelId">
              <Select
                v-model="repayChannelSelectArr"
                class="w220"
                @on-change="repayChannelSelect"
              >
                <Option
                  :value="'111'"
                  :label="this.$t('m.Tōngguòyínhángkǎhuánkuǎn')"
                >{{ $t('m.Tōngguòyínhángkǎhuánkuǎn') }}</Option>
                <Option
                  :value="'222'"
                  :label="this.$t('m.tōngguòdiànzǐqiánbāohuánkuǎn')"
                >{{ $t('m.tōngguòdiànzǐqiánbāohuánkuǎn') }}</Option>
              </Select>
            </FormItem>
            <!--
            <FormItem :label="$t('m.ynclear')" prop="payOff" v-show="!isRepayExtend">
              <RadioGroup v-model="repayForm.payOff">
                <Radio :label="0">{{$t('m.no')}}</Radio>
                <Radio :label="1">{{$t('m.yes')}}</Radio>
              </RadioGroup>
            </FormItem>
            -->
            <FormItem label="1上传凭证" prop="uploadLists">
              <span slot="label" class="ivu-form-label">
                {{this.$t('m.uploadE')}}
                <Poptip trigger="hover" placement="right">
                  <Icon type="ios-help-circle" size="15"></Icon>
                  <div slot="content" style="text-align:left;">
                    <p>{{this.$t('m.rOne')}}</p>
                    <p>{{this.$t('m.rTwo')}}</p>
                  </div>
                </Poptip>
              </span>
              <template v-if="uploadStatus == 'finished' && !uploadPending">
                <div class="upload-list" v-for="(item, index) in uploadList" :key="index">
                  <img :src="item">
                  <div class="upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(index)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                  </div>
                </div>
              </template>
              <template v-if="uploadStatus == 'start' && uploadPending">
                <div class="upload-list">
                  <Progress status="success" :percent="uploadPercent" hide-info></Progress>
                </div>
              </template>
              <Upload
                ref="upload"
                :show-upload-list="false"
                :format="['jpg','jpeg','png']"
                :before-upload="handleBeforeUpload"
                accept="image/jpeg, image/png"
                type="drag"
                action
                style="display: inline-block;width:58px;"
              >
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
            <FormItem :label="$t('m.remark')">
              <Input
                type="textarea"
                :placeholder="$t('m.inputRemark')"
                required
                v-model.trim="repayForm.remark"
              ></Input>
            </FormItem>
            <FormItem>
              <Button type="primary" :loading="repaySpin" @click="handleRepaySubmit2()">
                <span v-if="!repaySpin">{{$t('m.submit')}}</span>
                <span v-else>提交中…</span>
              </Button>
              <Button
                @click="handleRepayReset('repayForm')"
                style="margin-left: 10px"
              >{{this.$t('m.recycle')}}</Button>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane :label="$t('m.huánkuǎnjípíngzhànglìshǐ')" name="withhold">
          <Table border :columns="RepaymentHistoryTableTitle" :data="RepaymentHistoryTableData">
            <template slot-scope="{ row }" slot="name">
              <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button
                v-if="row.status == 'S'"
                type="warning"
                @click="RepaymentHistoryTableDataRepeal(row.userId,row.orderGid,row.orderRepayGid)"
              >Delete</Button>
              <span v-else>{{$t('m.yǐchèxiāo')}}</span>
            </template>
          </Table>
        </TabPane>
      </Tabs>
    </Modal>
    <!-- 线下还款 预览上传图片 -->
    <Modal :title="this.$t('m.yùlǎntúpiàn')" v-model="previewVisible" class="proofimg-modal">
      <img :src="previewImage" v-if="previewImage" class="proofimg-pic">
      <p class="no-img" v-else>{{$t('m.zànwútúpiàn')}}</p>
    </Modal>
    <!-- end -->
    <orderDetailModal
      :detailPayment="detailPayment"
      :visible="detailsVisible"
      :rdata="rdata"
      :rloading="rloading"
      @onCancel="onCancelDetailModal"
    ></orderDetailModal>
  </div>
</template>

<script>
import BaseInfo from "../../components/common/baseInfo";
import orderPoptip from "./components/order-poptip";
import orderDetailModal from "../order/components/order-detail";

export default {
  components: {
    BaseInfo,
    orderDetailModal,
    orderPoptip
  },
  computed: {
    isRepayExtend() {
      return !!this.repayForm.isExtend;
    }
  },
  data() {
    return {
      disDate: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      //  订单详情
      detailPayment: {
        userVirtualCardVo: {},
      },
      detailsVisible: false,
      rdata: [],
      rloading: false,
      //  预览图片
      previewVisible: false,
      previewImage: "",
      //  平账start
      repayModal: false,
      repaySpin: false,
      repayTab: "repay",
      uploadStatus: "",
      hksjsaleDate: "",
      remainingRepaidAmountSet: 0,
      formatRemainingRepaidAmountSet: 0,
      repayForm: {
        repayAmount: null,
        reductionAmount: 0,
        repayDate: "",
        // payOff: 0,
        remark: "",
        repayChannelId: "",
        repayChannelName: ""
      },
      repayFormOptions: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      repayChannelSelectArr: "",
      orderGidSet: "",
      time1: [],
      time2: [],
      time3: [],
      repayRules: {
        repayAmount: [
          {
            required: true,
            type: "number",
            message: this.$t("m.qǐngshūrùhuánkuǎnjīné"),
            trigger: "blur",
          }
        ],
        reductionAmount: [
          {
            required: true,
            type: "number",
            message: this.$t("m.qǐngshūrùjiǎnmiǎnjīné"),
            trigger: "blur"
          }
        ],
        uploadLists: [
          {
            required: false,
            type: "array",
            min: 1,
            message: this.$t("m.qǐngshàngchuánhuánkuǎnpíngzhèng"),
            trigger: "change"
          }
        ]
      },
      RepaymentHistoryTableDataStatus: {
        P: this.$t("m.jìnxíngzhōng"),
        S: this.$t("m.chénggōng"),
        F: this.$t("m.shībài"),
        C: this.$t("m.cancel")
      },
      RepaymentHistoryTableTitle: [
        {
          title: this.$t("m.huánkuǎnpíngzhàngshíjiān"),
          key: "timePay",
          align: "center"
        },
        {
          title: this.$t("m.shíjìhuánkuǎnjīné"),
          key: "payAmount",
          align: "center",
          render: (h, param) => {
            return h('div', this.formatTreeMount(param.row.payAmount));
          }
        },
        {
          title: this.$t("m.jiǎnmiǎnjīné"),
          key: "reductionAmount",
          align: "center",
          render: (h, param) => {
            return h('div', this.formatTreeMount(param.row.reductionAmount));
          }
        },
        {
          title: this.$t("m.status"),
          key: "status",
          align: "center",
          render: (h, params) => {
            const { status } = params.row;
            return h("span", this.RepaymentHistoryTableDataStatus[status]);
          }
        },
        {
          title: this.$t("m.bèizhù"),
          key: "remark",
          align: "center"
        },
        {
          title: this.$t("m.operate"),
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      RepaymentHistoryTableData: [],
      //  平账end
      baseInfoBox: false,
      baseInfoType: "1",
      search: {
        fullName: "",
        phone: "",
        orderGid: "",
        orderPaymentStatus: "",
        orderRepaymentStatus: "",
        overdueStatus: "",
        beginTimeOrder: "",
        endTimeOrder: "",
        beginTimePay: "",
        endTimePay: "",
        beginDueDate: "",
        endDueDate: "",
        pageNumber: 1,
        pageSize: 10
      },
      total: 0,
      loading: false,
      columns: [
        {
          title: this.$t("m.OrderGid"),
          fixed: "left",
          align: "center",
          key: "orderGid",
          width: 100,
        },
        {
          title: this.$t("m.cName"),
          fixed: "left",
          align: "center",
          key: "fullName",
          width: 100,
        },
        {
          title: this.$t("m.phone"),
          fixed: "left",
          align: "center",
          key: "phone",
          width: 110,
        },
        {
          title: this.$t("m.payDue"),
          align: "center",
          width: 100,
          render: (h, params) => {
            const { loanAmount, interestFine } = params.row;
            return h("div", [
              h(orderPoptip, {
                props: {
                  text: this.formatTreeMount((loanAmount || 0) + (interestFine || 0)),
                  content: [
                    {
                      key: this.$t('m.jièkuǎnjīné'),
                      value: this.formatTreeMount(loanAmount)
                    },
                    {
                      key: this.$t('m.penaltyRate'),
                      value: this.formatTreeMount(interestFine)
                    }
                  ]
                }
              })
            ]);
          }
        },
        {
          title: this.$t("m.mtc"),
          align: "center",
          width: 100,
          render: (h, params) => {
            const { serviceFee, interest } = params.row;
            return h("div", [
              h(orderPoptip, {
                props: {
                  text: this.formatTreeMount((serviceFee || 0) + (interest || 0)),
                  content: [
                    {
                      key: this.$t('m.ServiceCharge'),
                      value: this.formatTreeMount(serviceFee)
                    },
                    {
                      key: this.$t('m.Interest'),
                      value: this.formatTreeMount(interest)
                    }
                  ]
                }
              })
            ]);
          }
        },
        {
          title: this.$t("m.loanTimeLimit"),
          align: "center",
          key: "loanDays",
          width: 100,
        },
        {
          title: this.$t("m.applyTime"),
          align: "center",
          key: "timeOrder",
          width: 100,
        },
        {
          title: this.$t("m.rLt"),
          align: "center",
          key: "timePay",
          width: 100,
        },
        {
          title: this.$t("m.sptime"),
          align: "center",
          key: "dueDate",
          width: 100,
        },
        {
          title: this.$t("m.ynOverdue"),
          align: "center",
          key: "overDueDays",
          width: 100,
          render: (h, params) => {
            const { overDueDays } = params.row;
            let str = this.$t("m.yes");
            if (overDueDays === 0) str = this.$t("m.no");
            return h("div", str);
          }
        },
        {
          title: this.$t("m.overdueDay"),
          align: "center",
          key: "overDueDays",
          width: 100,
        },
        {
          title: this.$t("m.repayCreat"),
          align: "center",
          key: "orderRepaymentStatus",
          render: (h, params) => {
            //  FIXED 可以抽离，用的地方挺多
            const map = {
              repayNo: this.$t("m.wèihuánkuǎn"),
              preRepaid: this.$t("m.bùfènjiéqīng"),
              repaid: this.$t("m.yǐjiéqīng")
            };
            const { orderRepaymentStatus } = params.row;
            return h("div", map[orderRepaymentStatus]);
          }
        },
        {
          title: this.$t("m.operate"),
          width: 150,
          align: "center",
          fixed: "right",
          key: "action",
          render: (h, params) => {
            const {
              row: { orderGid, userId, remainingRepaidAmount }
            } = params;

            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    long: true,
                  },
                  style: {
                    margin: "10px 0",
                  },
                  on: {
                    click: () => {
                      this.getOrderInfo(userId, orderGid);
                    }
                  }
                },
                this.$t("m.oDetails")
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                    long: true,
                  },
                  style: {
                    marginBottom: "10px",
                  },
                  on: {
                    click: () => {
                      this.getBankInfo(params.row);
                    }
                  }
                },
                this.$t("m.userDetails")
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small",
                    long: true,
                  },
                  style: {
                    marginBottom: "10px",
                  },
                  on: {
                    click: () => {
                      this.handleSet(orderGid, userId, remainingRepaidAmount);
                    }
                  }
                },
                this.$t("m.píngzhàng")
              )
            ]);
          }
        }
      ],
      dataSource: []
    };
  },
  created() {
    this.getFlatAccountManageList();
  },
  methods: {
    //获取订单详情 操作详情
    async getOrderInfo(userId, orderGid) {
      this.detailsVisible = true;
      this.rloading = false;

      await this.$http
        .get(
          "/api/laocai/order/info?orderGid=" + orderGid + "&userId=" + userId
        )
        .then(res => {
          this.detailPayment = {};
          if (res.body.code == 0) {
            this.detailPayment = res.body.result || {};
          } else {
            this.$Message.warning(this.$t("m.errorCode" + res.body.code));
          }
        });
      await this.$http
        .get(
          "/api/laocai/order/repayment/list?orderGid=" +
            orderGid +
            "&userId=" +
            userId
        )
        .then(res => {
          this.rdata = res.body.result || [];
          // 设置的 弹出中的还款方式下拉框
          // this.repayForm.repayWay=res.body.result
        });
      // this.detailPayment = detailsArr[0].info;
      // this.rdata = detailsArr[1];
      // this.exdata = detailsArr[2];
      this.rloading = false;
    },
    onCancelDetailModal(hasLoad) {
      this.detailsVisible = false;
      hasLoad && this.getFlatAccountManageList();
    },
    // 预览图片
    handleView(index) {
      this.previewImage = this.uploadList[index];
      this.previewVisible = true;
    },
    // 删除图片
    handleRemove(index) {
      this.uploadList.splice(index, 1);
    },
    // 线下还款重置
    handleRepayReset(name) {
      this.uploadList = [];
      this.repayPayOff = false;
      this.$refs[name].resetFields();
    },
    handleBeforeUpload(file) {
      const reg = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
      const limit5 = file.size / 1024 / 1024 < 1;
      const check = this.uploadList.length < 1;

      if (!reg.test(file.type)) {
        this.$Message.error(
          this.$t("m.zhǐnéngshàngchuánjpgjpegpnggéshìdetúpiàn")
        );
        return false;
      }
      if (!limit5) {
        this.$Message.error(this.$t("m.shàngchuándetúpiànbùnéngchāoguò1MB"));
        return false;
      }
      if (!check) {
        this.$Message.error(this.$t("m.zuìduōshàngchuán1zhāngtúpiàn"));
        return false;
      }

      this.uploadPercent = 0;
      this.uploadStatus = "start";
      this.uploadPending = true;

      // 压缩图片
      lrz(file)
        .then(res => {
          const { base64 } = res;
          const { fileName } = res;
          this.uploadPercent = 10;
          this.fileName = fileName;
          // this.evidenceUrl= evidenceUrl

          // 在file打印的时候打印畜类 img的所有信息，在file打印的时候打印file.name就可以拿到哦图片名
          // BAIDU OCR
          this.$http
            .put("/api/laocai/helper/upload/image", {
              imgData: base64,
              // file:file.name
              fileName: file.name
            })
            .then(
              res => {
                if (res.body.code == 0) {
                  this.uploadList.push(base64);
                  this.repayForm.uploadLists = this.uploadList;
                  this.evidenceUrl = res.body.result;
                  this.$Message.success(
                    this.$t("m.shàngchuánpíngzhèngchénggōng")
                  );
                  setTimeout(() => {
                    this.uploadPending = false;
                    this.uploadStatus = "finished";
                  }, 200);
                }
              },
              error => {
                console.log(error);
              }
            );
        })
        .catch(err => {
          this.$Message.error(this.$t("m.yāsuōtúpiànshībài"));
        })
        .always(res => {});

      return false;
    },
    RepaymentHistoryTableDataRepeal(userId, orderGid, orderRepayGid) {
      this.$http
        .post("/api/laocai/order/repayment/callback", {
          orderGid: orderGid,
          userId: userId,
          orderRepayGid: orderRepayGid
        })
        .then(res => {
          if (res.body.code == 0) {
            this.$Message.success(this.$t("m.chénggōng"));
            this.hksjsaleDateEventHistory(userId, orderGid);
            this.getFlatAccountManageList();
            this.repayModal = false;
          } else {
            this.$Message.warning(this.$t("m.errorCode" + res.body.code));
          }
        });
    },
    handleRepayDate(e) {
      this.repayForm.repayDate = e;
    },
    repayChannelSelect(e) {
      let arr = this.repayChannelSelectArray;
      for (const key in arr) {
        if (arr[key].key == e) {
          this.repayForm.repayChannelId = arr[key].key;
          this.repayForm.repayChannelName = arr[key].value;
        }
      }
    },
    // 平帐按钮
    handleSet(orderGid, userId, remainingRepaidAmount) {
      // this.repayForm = {
      //   payOff: 0
      // };
      this.repayForm= {
        repayAmount: null,
        reductionAmount: 0,
        repayDate: "",
        remark: "",
        repayChannelId: "",
        repayChannelName: ""
      };
      this.repayChannelSelectArr = "";
      this.evidenceUrl = "";
      this.uploadList = [];
      this.hksjsaleDateEvent();
      this.hksjsaleDateEventHistory(userId, orderGid);
      this.repayModal = true;
      this.orderGidSet = orderGid;
      this.userId = userId;
      this.remainingRepaidAmountSet = remainingRepaidAmount;
      this.formatRemainingRepaidAmountSet = this.formatTreeMount(remainingRepaidAmount);
    },
    hksjsaleDateEvent() {
      var d = new Date();
      let y = d.getFullYear(); // 年份
      let m = (d.getMonth() + 1).toString().padStart(2, "0"); // 月份
      let r = d
        .getDate()
        .toString()
        .padStart(2, "0"); // 日子
      let h = d
        .getHours()
        .toString()
        .padStart(2, "0"); // 小时
      let mm = d
        .getMinutes()
        .toString()
        .padStart(2, "0"); // 分钟
      let ss = d
        .getSeconds()
        .toString()
        .padStart(2, "0"); // 秒
      this.hksjsaleDate = `${y}-${m}-${r} ${h}:${mm}:${ss}`; // es6 字符串模板
      this.repayForm.repayDate = this.hksjsaleDate;
    },
    hksjsaleDateEventHistory(userId, orderGid) {
      this.$http
        .get(
          "/api/laocai/order/repayment/list?repayIsAuto=0&orderGid=" +
            orderGid +
            "&userId=" +
            userId
        )
        .then(res => {
          if (res.body.code == 0) {
            this.RepaymentHistoryTableData = res.body.result || [];
          } else {
            this.$Message.warning(this.$t("m.errorCode" + res.body.code));
          }
        });
    },
    handleRepaySubmit2() {
      this.repaySpin = true;
      if (
        this.repayForm.repayAmount !== undefined &&
        this.repayForm.repayAmount !== "" &&
        this.repayForm.reductionAmount !== undefined &&
        this.repayForm.reductionAmount !== ""
      ) {
        this.$http
          .post("/api/laocai/order/repayment/background-confirm", {
            userId: this.userId,
            orderGid: this.orderGidSet,
            evidenceUrl: this.evidenceUrl,
            repayAmount: this.repayForm.repayAmount,
            reductionAmount: this.repayForm.reductionAmount,
            timeRepay: this.repayForm.repayDate,
            // payOff: this.repayForm.payOff,
            remark: this.repayForm.remark,
            repayChannelId: this.repayForm.repayChannelId,
            repayChannelName: this.repayForm.repayChannelName
          })
          .then(res => {
            if (res.body.code == 0) {
              this.repayModal = false;
              this.repaySpin = false;
              this.getFlatAccountManageList();
              this.$Message.success(this.$t("m.errorCode" + res.body.code));
            } else {
              this.repaySpin = true;
              this.$Message.warning(this.$t("m.errorCode" + res.body.code));
              setTimeout(() => {
                this.repaySpin = false;
              }, 2000);
            }
          })
          .catch(error => {
            this.repaySpin = false;
          });
      } else {
        this.repaySpin = false;
        this.$Message.error(
          this.$t("m.qǐngshūrùjiǎnmiǎnjīné"),
          this.$t("m.qǐngshūrùhuánkuǎnjīné")
        );
      }
    },
    //  用户信息详情中的功能
    getBankInfo(row) {
      const { userId, orderGid } = row;
      this.baseInfoBox = true;
      this.baseInfoUserId = userId;
      this.baseInfoOrderGid = orderGid;
    },
    handleReset() {
      this.time1 = [];
      this.time2 = [];
      this.time3 = [];
      this.search = Object.assign(
        {},
        {
          fullName: "",
          phone: "",
          orderGid: "",
          orderPaymentStatus: "",
          orderRepaymentStatus: "",
          overdueStatus: "",
          beginTimeOrder: "",
          endTimeOrder: "",
          beginTimePay: "",
          endTimePay: "",
          beginDueDate: "",
          endDueDate: "",
          pageNumber: 1,
          pageSize: 10
        }
      );
      this.getFlatAccountManageList();
    },
    //  还款状态改变
    handleChange(value, str) {
      this.search = Object.assign({}, this.search, {
        [str]: value
      });
    },
    //  时间改变
    timeChange(e, str) {
      const map = {
        order: {
          start: "beginTimeOrder",
          end: "endTimeOrder"
        },
        pay: {
          start: "beginTimePay",
          end: "endTimePay"
        },
        bue: {
          start: "beginDueDate",
          end: "endDueDate"
        }
      };
      if (typeof e == "undefined") {
        this.search = Object.assign({}, this.search, {
          [map[str].start]: e[0]
        });
      } else if (typeof e == "object") {
        this.search = Object.assign({}, this.search, {
          [map[str].start]: e[0],
          [map[str].end]: e[1]
        });
      }
    },
    pageChange(e) {
      this.$set(this.search, "page", e);
      this.getFlatAccountManageList();
    },
    // 每页显示数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.search = Object.assign({}, this.search, {
        pageNumber: 1,
        pageSize: val
      });

      this.getFlatAccountManageList();
    },
    async getFlatAccountManageList() {
      this.loading = true;
      let query = "";
      Object.keys(this.search).forEach((item, index) => {
        if (this.search[item]) {
          query += `${index === 0 ? "" : "&"}${item}=${this.search[item]}`;
        }
      });
      var URL = `/api/laocai/finance/flatAccount/list?${query}`;

      const { body } = await this.$http.get(URL);

      this.loading = false;

      const {
        code,
        result,
      } = body;


      if (result) {
        const { size, list } = result;
        if (code === 0) {
          this.dataSource = list || [];
          this.total = size || 0;
        } else {
          this.dataSource = [];
          this.total = 0;
        }
      } else {
        this.dataSource = [];
        this.total = 0;
      }
    }
  }
};
</script>

<style lang="scss">
@import "../../static/common.scss";

.average-wrapper {
  .items {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 20px;
    width: 200px;

    .label {
      overflow: hidden;
      white-space: inherit;
      text-align: right;
      color: #222;
      font-size: 14px;
      margin-right: 10px;
    }
  }

  .search_btn {
    min-width: 100px;
    margin-right: 20px;
  }
}
</style>
